<template>
  <div class="EditUser">
  	欢迎您访问本系统，{{adminName}}
  </div>
</template>

<script>
import { mapState } from 'vuex';
import {getAllAdmins,getSearchAdmins,deleteAdmins} from '../../api/admin';
export default {
  name: 'EditAdmins',
  computed:{
    ...mapState([
      'adminName',
      'adminToken'
    ]),
  },
  data(){
  	return{
        adminsList:[]
  	}
  },
  mounted(){
  	const res = getAllAdmins();
  	res
  	.then((admins)=>{
  		this.adminsList = admins;
  	})
  	.catch((e)=>{
  		alert(e)
  	})
  },
  methods:{
    navTo(route){
        this.$router.push(route);
    },
    addAdmins(){
        this.navTo('/backstage/editAdmins/addAdmins')

    },
    updateAdmins(id){
        this.navTo('/backstage/editAdmins/'+id)
    },
    deleteAdmins(id){
  		const res = deleteAdmins(id);
  		res
  		.then(()=>{
  			alert('删除成功');
  			this.adminsList.map((item,index)=>{
  				if(item.id===id){
  					this.adminsList.splice(index,1);
  				}
  			})
  		})
  		.catch((e)=>{
  			alert(e);
  		})
  	},
    searchAdmins(){
  		const nickname = this.$refs.inputName.value;
      const email = this.$refs.inputAccount.value;

      const res = getSearchAdmins({
          nickname:nickname,
          email:email
      });
      res
  		.then((data)=>{
  			this.adminsList = data;
  		})
  		.catch((e)=>{
  			alert(e);
  		})
  	},
  }
}
</script>

<style scoped lang="less">
@import "../../assets/css/var.less";
.EditUser{
	header{
		width: 100%;
		height: 40px;
		line-height: 40px;
		span{
			float: left;
		}
		div{
			height: 20px;
			float: right;
      input{
        border: none;
        border-bottom: 1px solid #337da4;
        background-color: rgba(0,0,0,0);
        width: 180px;
        padding-left: 10px;
      }
			button{
        position: relative;
        top: -1px;
        border: none;
        background-color: rgba(0,0,0,0);
				i{
					font-size: 17px;
          color:#337da4;
				}
			}
		}
	}
}
</style>
